<template>
    <div class="wrapper">
        <!-- <div v-for="item in menuList">{{item.title}}</div> -->
        <el-menu
            :default-active='defaultActive'
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            router
            unique-opened
            collapse-transition
            :collapse='menuCollapse'
            active-text-color="#409EFF">
            <template v-for='item in menu'>
                <!-- 有子菜单列表 -->
                <el-submenu v-if='item.children && item.children.length' :key='item.id' :index='item.router'>
                    <template slot='title'>
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item 
                            :index="`${item.router}${child.router}`" 
                            v-for="child in item.children" 
                            :key='child.id'>{{child.title}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!-- 无子菜单 -->
                <el-menu-item v-else :key='item.id' :index='item.router'>
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import BetterScroll from 'better-scroll';
    export default {
        props : {
            //是否在开发环境或是否是超级管理员<开发者>
            isDevelop : {
                type : Number,
                default : 0
            },
            //菜单列表
            menu : {
                type : Array,
                default : _ => []
            }
        },
        data () {
            return {
                
            }
        },
        computed : {
            defaultActive () {
				return this.$route.path
			},
            menuCollapse () {
                return this.$store.getters.menuCollapse
            }
        },
        mounted () {
            let wrapper = document.querySelector('.wrapper');
            this.scroll = new BetterScroll(wrapper, {
                mouseWheel : true,
                bounce : false
            })

        },
        methods : {

        },
    }
</script>

<style lang='less' scoped>
    .wrapper {
        height: 100vh;
        overflow: hidden;
    }
    .el-menu-vertical-demo {
        min-height: 100vh;
        overflow-x: hidden;
    }
    [class*=" el-icon-"], [class^=el-icon-] {
        color: #fff !important;
    }
</style>